<template>
  <div>
    <div v-title>修改密码</div>
    <div style="padding-top:10px">
      <van-cell-group>
        <van-cell title="原密码">
          <input placeholder="请输入原密码" type="password" v-model="OldPassword" />
        </van-cell>
        <van-cell title="验证码">
          <input placeholder="请输入验证码" type="number" v-model="YZM" style="margin-right: 3%;width: 60%;" />
          <button class="button" @click="getyzm">获取验证码</button>
        </van-cell>
        <van-cell title="新密码">
          <input placeholder="请输入新密码" type="password" v-model="SurePassword" />
        </van-cell>
        <van-cell title="确认新密码">
          <input placeholder="请确认新密码" type="password" v-model="SurePassword2" />
        </van-cell>
      </van-cell-group>
    </div>
    <van-button type="primary" class="save" @click="Change">保存修改</van-button>
  </div>
</template>
<script>
import api from '../fetch/api.js';
import {
  Cell,
  CellGroup,
  Button,
  Toast
} from 'vant';
export default {
  components: {
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Button.name]: Button,
  },
  data() {
    return {
      SurePassword: '',
      SurePassword2: '',
      OldPassword: '',
      YZM: '',
    }
  },
  methods: {
    getyzm() {
      console.log(1)
    },
    Change() {
      if (this.OldPassword == '') {
        Toast({ message: '请输入原密码', position: 'top' });
        return;
      }
      if (this.SurePassword == '') {
        Toast({ message: '请输入新密码', position: 'top' });
        return;
      }
      if (this.SurePassword2 == '') {
        Toast({ message: '请确认新密码', position: 'top' });
        return;
      }
      if (this.SurePassword != this.SurePassword2) {
        Toast({ message: '确认密码错误', position: 'top' });
        return;
      }
      api.ResetLog({
        OldPassword: this.OldPassword,
        SurePassword: this.SurePassword,
        Code: 1,
      }).then(res => {
        if (res.Success) {
          Toast({ message: res.Msg, position: 'top' });
          setTimeout(() => {
            this.$router.push("/BaiFenCenter")
          }, 1000)
        } else {
          Toast({ message: res.Msg, position: 'top' });
        }
      })
    }
  }
};

</script>
<style scoped>
input {
  border: 0;
  text-align: right;
}

.button {
  height: 26px;
  line-height: 20px;
  float: right;
  border-radius: 3px;
  background: #34be70;
  border: 0px;
  padding: 0px 10px;
  color: #fff;
  font-size: 12px;
}

.save {
  background: #34be70;
  width: 94%;
  border: 0;
  margin: 30px 3% 0 3%
}
</style>
